<template>
    <div class="common-layout">
        <h1>待办事项</h1>
        <el-container>
        <el-header><SonHeader @add="addHandle"/></el-header>
        <el-main><SonMain :list="list" @changeD="changeHandle" @del="delHandle"/></el-main>
        <el-footer><SonFooter :list="list" @show="showHandle"/></el-footer>
        </el-container>
    </div>
</template>
<script>
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';
import SonFooter from '@/components/ToDo/SonFooter.vue';

export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter
    },
    created() {
        this.copyList=this.list.slice()
    },
    data() {
        return {
            list:[
                {
                    id:'001',
                    content:'111',
                    startDate:'2024-10-30',
                    finishDate:'',
                    state:false
                },
                {
                    id:'002',
                    content:'222',
                    startDate:'2024-10-30',
                    finishDate:'',
                    state:false
                }
            ],
            now:new Date(),
            copyList:[]
        }
    },
    methods: {
        addHandle(val){
            this.list.push({id:+new Date(),
                            content:val,
                            startDate:this.formatDate,
                            finishDate:'',
                            state:false
            })
            this.copyList=this.list.slice()
        },
        changeHandle(i){
            this.list[i].finishDate=this.formatDate
            this.copyList=this.list.slice()
        },
        delHandle(i){
            this.list.splice(i,1)
            this.copyList=this.list.slice()
        },
        showHandle(val){
            if(val=='all'){
                this.list=this.copyList.slice()
            }else if(val=='done'){
                this.list=this.copyList.filter(v => v.state==true)
            }else if(val=='undo'){
                this.list=this.copyList.filter(v => v.state==false)
            }else{
                this.list=[],
                this.copyList=[]
            }
        }
    },
    computed:{
        formatDate(){
            let month = this.now.getMonth()+1
            return this.now.getFullYear()+'-'+month+'-'+this.now.getDate()
        }
    }
}
</script>

<style>
#app{
    width: 800px;
    margin: auto;
}
</style>